<template>
  <div id="home">
    <header>
      <div class="dv">
        <div class="iconfont dv-0"></div>
        <headers :title="title" class="dv-1">
        </headers>
        <div class="iconfont dv-2">&#xe8f4;</div>
      </div>
    </header>
    <div>
      <swiper :list="list"></swiper>
      <div class="contents">
        <span class="iconfont">&#xe824; <i>自营品牌</i></span>
        <span class="iconfont">&#xe824; <i>无忧退货</i></span>
        <span class="iconfont">&#xe824; <i>48小时快速退款</i></span>
      </div>

    </div>
    <section>
      <section1></section1>
    </section>
  </div>
</template>
<script>
import headers from "@/components/headers/myheader";
import swiper from "@/components/swiper/swiper";
import section1 from "@/components/home/section1";

export default {
  name: 'home',
  props: {},
  data() {
    return {
      title: '积云商城',
      icon: '&#xe8f4;',
      list: []
    };
  },
  // 子组件转换
  components: {headers, swiper, section1},
  // 数据引入
  mounted() {
    this.$axios({
      method: 'get',
      url: 'http://api.com/index'
    }).then((response) => {
      this.list = response.data.swiper;
      // console.log(this.list)
    }).catch(function (error) {
      alert(error)
    })
  },
  created() {
  },
  //点击函数事件
  methods: {},
}
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: auto;

  .dv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: .4rem;

    div {
      height: 8vh;
      display: inline-block;
      flex: 2;
      box-sizing: content-box;
    }

    .dv-1 {
      height: 2vh;
      line-height: 4vh;
    }

    .dv-2 {
      font-size: .4rem;
      line-height: 7vh;
    }
  }

  .contents {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    color: red;
    font-weight: initial;
    border-bottom-color: hsla(0, 0%, 73%, .14);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: .5rem;

    i {
      color: #929292;
    }

  }
}

section {
  width: 100%;
  height: 10vh;
  border-top-color: hsla(0, 0%, 73%, .14);
  border-top-style: solid;
  border-top-width: 1px;
  background-color: #fff;
  box-sizing: border-box;
}
</style>